拖拽
html:
<link rel="stylesheet" href="http://wwwcdn.kimiss.net/public/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://wwwcdn.kimiss.net/public/bootstrap/font-awesome-4.0.3/css/font-awesome.css"><script src="http://kissy.kimiss.net/k/??kissy/1.4.0/seed-min.js,cfg-min.js?t=1384946820" data-config="{combine:true}" charset="utf-8"></script>
<{foreach from=$datas item=data}> <{/foreach}>
js
KISSY.use('node, io, gallery/formSubmitBtn/1.0/formSubmitBtn, \n\json,dd,dd/plugin/proxy,dd/plugin/scroll', function(S, Node, IO, FormSubmitBtn, JSON, DD, DDProxy, DDScroll) { var $ = KISSY.all, DOM = KISSY.DOM; dataDraggable();// 数据可托拽 function dataDraggable() { var DDM = DD.DDM, DraggableDelegate = DD.DraggableDelegate, DroppableDelegate = DD.DroppableDelegate, Draggable = DD.Draggable, Droppable = DD.Droppable; var dragDelegate = new DraggableDelegate({ container: "#dataBox", handlers: ['.selector'], selector: '.dataUnit', move: true, plugins: [ new DDProxy({ /** * 如何产生替代节点 * @param drag 当前拖对象 */ node: function(drag) { var n = S.one(drag.get("dragNode")[0].cloneNode()); n.removeAttr('id'); n.css("opacity", 0.8); return n; }, // 主体位置不跟随 proxy moveOnEnd: false, // 每次 proxy 都重新生成 destroyOnEnd: true }), new DDScroll({ node: "#dataBox" }) ] }); var dropDelegate = new DroppableDelegate({ container: "#dataBox", selector: '.dataUnit' }); dragDelegate.on("dragover", function(ev) { var drag = ev.drag; var drop = ev.drop; var dragNode = drag.get("dragNode"), dropNode = drop.get("node"); var middleDropX = (dropNode.offset().left * 2 + dropNode.width()) / 2; if (ev.pageX > middleDropX) { var next = dropNode.next(); if (next && next[0] == dragNode[0]) { } else { dragNode.insertAfter(dropNode); } } else { var prev = dropNode.prev(); if (prev && prev[0] == dragNode[0]) { } else { dragNode.insertBefore(dropNode); } } }); } // 产品可托拽 end });